<template>
  <div class="posts-page" :style="{ 'padding-top': info.id ? '160px' : '' }">
    <div class="nav-bar">
      <span class="close" @click="$router.back()">
        <img src="@/assets/arrow/ll.png" alt="" />
      </span>
      <span class="title">现场晒图</span>
      <span class="share" @click="showSharePage = true">
        <img src="@/assets/camra/kA.png" alt="" />
      </span>
    </div>
    <div class="info-box">
      <div class="info" v-if="info.id" @click="$router.push('/feeds/' + id)">
        <div class="info-pic">
          <img :src="info.pic_url" alt="" />
        </div>
        <div class="info-desc">
          <div class="title">{{ info.tiny_title }}</div>
          <div class="time-name">
            <span class="name">{{ info.name }}</span>
            <span class="point">·</span>
            <span class="time">{{ info.time }}</span>
          </div>
        </div>
        <div class="detail">
          <div class="content">详情</div>
        </div>
      </div>
      <div class="option-box">
        <div class="sort-by">
          <span class="sort" :class="{ active: sort_by == 'hot' }" @click="editSortBy('hot')">推荐</span>
          <span class="line">|</span>
          <span class="new" :class="{ active: sort_by == 'time' }" @click="editSortBy('time')">最新</span>
        </div>
        <div class="video-option">
          <span class="video" :class="{ active: type == 'video_post' }" @click="editType('video_post')">视频</span>
          <span class="video" :class="{ active: showPic }" @click="editShowPic">照片墙</span>
        </div>
      </div>
    </div>
    <refresh-list :status="status" @on-load="onLoad" @on-refresh="onRefresh">
      <template #list>
        <!-- 没有数据 -->
        <div class="empty" v-if="dataList.length == 0">
          <div class="pic">
            <img src="@/assets/head/none.jpg" alt="" />
          </div>
        </div>
        <div class="post-list" v-else-if="!showPic">
          <post-item
            v-for="(p, i) in dataList"
            :key="i"
            :badge_url="p.badge_url"
            :img_url="p.send_user.avatar"
            :name="p.send_user.name"
            :title="p.title"
            :video_img_url="p.pics[0].url"
            :type="p.type"
            :pics="p.pics"
            :like_count="p.like_count"
            :view_count="p.view_count"
            :address="p.business && p.business.city + p.business.name"
            :content="p.content"
            :subjects="p.subjects ? p.subjects : []"
            :id="p.id"
          ></post-item>
        </div>
        <div v-else>
          <!-- 只展示图片 -->
          <div v-for="(pics, index) in dataList" :key="index">
            <left-pics v-if="index % 2 !== 0" :pics="pics" @preview-pic="previewPics"></left-pics>
            <right-pics v-else :pics="pics" @preview-pic="previewPics"></right-pics>
          </div>
        </div>
      </template>
    </refresh-list>

    <!-- 发布相机 -->
    <div class="camera" @click="showSharePage = true">
      <img src="@/assets/camra/4z.png" alt="" />
    </div>
    <transition name="share">
      <share-page v-if="showSharePage" @hide-share="showSharePage = false"></share-page>
    </transition>
  </div>
</template>

<script>
import SharePage from '@/components/public-detail/SharePage'
import RefreshList from '../activity/public-component/RefreshList.vue'
import PostItem from './PostItem.vue'
import LeftPics from './LeftPics.vue'
import RightPics from './RightPics.vue'
import axios from '@/utils/request'
import { preview } from '@/utils/preview'
import { bus } from '@/utils/bus/bus'
export default {
  props: ['id'],
  components: {
    SharePage,
    RefreshList,
    PostItem,
    LeftPics,
    RightPics
  },
  data() {
    return {
      status: {
        isLoading: false,
        finished: false,
        loading: false
      },
      info: {}, // 从推荐页面传递的数据
      page: 1,
      type: 'all',
      sort_by: 'hot',
      dataList: [],
      images: [],
      num: 0,
      showPic: false,
      showSharePage: false // 显示分享页面
    }
  },
  methods: {
    async requestData() {
      /*
      请求地址:https://api.xmonster.cn/v2/feeds/186505/posts
      请求方式：get
      请求参数：
      prams：{
        page：1
        limit：20
        type：all（照片） video_post（视频）
        is_selected:0
        sort_by: hot(推荐)  time(最新)
      }`
      */
      const data = await axios.get(`/v2/feeds/${this.id}/posts`, {
        params: {
          page: this.page,
          limit: 20,
          type: this.type,
          is_selected: 0,
          sort_by: this.sort_by
        }
      })
      if (data.length > 0) {
        if (this.showPic) {
          this.saveAllPic(data)
        } else {
          this.dataList = [...this.dataList, ...data]
        }
        this.status.loading = false
        this.status.finished = false
        this.page++
      } else {
        this.status.finished = true
      }
    },
    editSortBy(val) {
      if (val == this.sort_by) return
      this.sort_by = val
      //发送请求
      this.resetRequest()
    },
    editType(val) {
      if (val == this.type) {
        this.type = 'all'
      } else {
        this.type = val
      }
      this.showPic = false
      // 发送请求
      this.resetRequest()
    },
    editShowPic() {
      this.showPic = !this.showPic
      this.type = 'all'
      this.resetRequest()
    },
    // 讲所有的图片进行保存
    saveAllPic(data) {
      let index = 0
      let pics = []
      data.forEach((item) => {
        item.pics.forEach((pic) => {
          pic['index'] = index
          if (index == 5) {
            pics.push({
              index: this.num,
              url: pic.url
            })
            this.dataList.push(pics)
            index = 0
            pics = []
          } else {
            pics.push({
              index: this.num,
              url: pic.url
            })
            index++
          }
          this.num++
          this.images.push(pic.url)
        })
      })
    },
    //重新发起请求
    async resetRequest() {
      this.page = 1
      this.dataList = []
      const Toast = this.$toast.loading({
        duration: 0, // 持续展示 toast
        forbidClick: true,
        message: '加载中...'
      })
      try {
        await this.requestData()
      } catch {
        Toast.clear()
        this.$toast.fail('请检查网络！')
      } finally {
        Toast.clear()
      }
    },
    // 下拉刷新
    async onRefresh() {
      this.page = 1
      this.dataList = []
      await this.resetRequest()
      this.status.isLoading = false
    },
    // 滚动加载更多
    async onLoad() {
      await this.requestData()
      this.status.loading = false
    },
    // 预览图片
    previewPics(index) {
      preview(this.images, index)
    }
  },
  async created() {
    const Toast = this.$toast.loading({
      duration: 0, // 持续展示 toast
      forbidClick: true,
      message: '加载中...'
    })
    try {
      bus.$off('send-info')
      bus.$off('preview')
      bus.$on('send-info', (info) => {
        if (info && info.id == this.$route.params.id) {
          this.showPic = true
          this.info = info
        }
      })
      bus.$on('preview', () => {
        console.log(111)
        this.showPic = true
      })
      await this.requestData()
    } catch {
      Toast.clear()
      this.$toast.fail('请检查网络！')
    } finally {
      Toast.clear()
    }
  }
}
</script>

<style lang="less" scoped>
.posts-page {
  padding: 90px 10px 0;
  img {
    height: 100%;
    width: 100%;
  }
  .nav-bar {
    z-index: 10;
    position: fixed;
    top: 0;
    left: 0;
    height: 46px;
    width: 100%;
    display: flex;
    align-items: center;
    background-color: #d94648;
    padding: 0 20px;

    .title {
      flex: 1;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      color: #fff;
      font-size: 18px;
      line-height: 30px;
      font-weight: 600;
    }
    .close,
    .share {
      height: 30px;
      width: 30px;
      &.close {
        margin-right: 10px;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          transform: rotate(180deg);
          height: 20px;
          width: 20px;
        }
      }
    }
  }

  .info-box {
    padding: 10px;
    z-index: 40;
    position: fixed;
    top: 46px;
    left: 0;
    width: 100%;
    background-color: #fff;

    .info {
      margin-bottom: 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .info-pic {
        width: 60px;
        height: 60px;

        img {
          height: 100%;
          width: 100%;
        }
      }
      .info-desc {
        align-self: flex-start;
        flex: 1;
        max-width: 223px;
        color: #999;
        font-size: 12px;
        line-height: 18px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;

        .title {
          padding-top: 10px;
          margin-bottom: 5px;
          font-size: 16px;
          color: #333;
          font-weight: 700;
        }

        .time-name {
          .point {
            font-size: 18px;
            font-weight: 700;
            padding: 0 3px;
          }
        }
      }
      .detail {
        color: #fff;
        font-size: 16px;

        .content {
          border-radius: 5px;
          padding: 5px 10px;
          background-color: #d94648;
        }
      }
    }
    .option-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      font-size: 14px;
      color: #999;

      .sort-by {
        .line {
          padding: 0 5px;
        }

        span.active {
          font-weight: 700;
          color: #d94648;
        }
      }

      .video-option {
        .video {
          padding: 3px 15px;
          border-radius: 999px;
          margin-left: 15px;

          &.active {
            color: #fff;
            background-color: #d94648;
          }
        }
      }
    }
  }

  .empty {
    height: 300px;
    width: 100%;

    .pic {
      height: 180px;
      width: 180px;
      margin: 100px auto;
    }
  }
  .camera {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    height: 60px;
    width: 60px;
    z-index: 30;
  }

  .share-enter,
  .share-leave-to {
    opacity: 0;
  }
  .share-enter-active,
  .share-leave-active {
    transition: all 0.5s linear;
  }
  .share-enter-to,
  .share-leave {
    opacity: 1;
  }
}
</style>
